<template>

  <div style="width: 100%; height: 100%; background-color: white;">

  <div style="width: 98%; height: 100%; background-color:white;">
    <div style="width:96%; height: 95%; background-color:  white;">
      <el-row>
        <el-col :span="8" :offset="16">
          校&nbsp&nbsp&nbsp&nbsp区:&nbsp&nbsp<el-select style="width: 270px;">
            <el-option>

            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row style="margin-top: 10px;">
        <el-col :span="24">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" size="mini" style="width: 100%;">
            <el-menu-item index="1" @click="findByCount()">工资</el-menu-item>
            <el-menu-item index="2" @click="findByGrounp()">员工工资管理</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-descriptions >
    <el-descriptions-item label="搜索"><el-input size="mini" style="width: 230px;" v-model="name" placeholder="请输入老师名称"></el-input><el-button
            type="primary"
            class="searchBtn"
            icon="el-icon-search"
            size="mini"
            @click="findByName()"
            >查询</el-button
          ></el-descriptions-item>

      </el-descriptions>
      <div style="background-color: aliceblue;">
      <el-row>

      </el-row>
      <el-row style="margin-top: 15px;">
        <el-col :span="2">
          <label style="font-size: 15.5px; color: red;">员工数目:3人</label>
        </el-col>
      <el-col :span="2" :offset="20">
        <el-button type="info" size="small" @click="export2Excel()">导出</el-button>
      </el-col>
      </el-row>
    </div>
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderlist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    width="60"
                            prop="id"
                            label="序号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="teacher"
                            label="员工姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="role"
                            label="角色"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="workmoney"
                            label="基本工资"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width=""
                            prop="countmoney"
                            label="课时费(单节)"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="tongxun"
                            label="通讯补贴"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="80px"
                            prop="rich"
                            label="饭补"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            width="50px"
                            prop="housemoney"
                            label="住房补贴"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="trafficmoney"
                            label="交通补贴"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="wuxian"
                            label="五险"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            prop="remark"
                            label="备注"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            width="218px"
                            label="操作"
                            >
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" @click="setsalay(scope.row)">设置工资</el-button>
                            <el-button type="primary" size="mini" @click="setcount(scope.row)">设置课时费</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
    </div>
    <el-dialog
            title="课时费设计"
            :visible.sync="dialogVisibles"
            width="35%"
            :before-close="handleClose">
        <el-form :model="orderlist" ref="feeStarand" label-width="100px" class="demo-feeStarand" style="margin-top: -50px;">
            <el-form-item label="老师:" prop="name">
                <label size="small" style="color: red; margin-right: 320px;">{{ this.scope.teacher }}</label>
            </el-form-item>
            <el-form-item label="课时费(单次):" prop="name">
                <el-input style="width: 200px; margin-left: -190px;" v-model="countmoney" size="small"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="update1()">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
            title="设置工资"
            :visible.sync="dialogVisible"
            width="35%"
            :before-close="handleClose">
        <el-form :model="orderlist" ref="feeStarand"  label-width="100px" class="demo-feeStarand">
            <el-form-item label="老师:" prop="name" style="margin-top: -40px;">
                <label size="small" style="color: red; margin-right: 320px;">{{ this.scope.teacher }}</label>
            </el-form-item>
            <el-form-item label="基本工资" prop="idcard">
                <el-input style="width: 200px; margin-left: -190px;" v-model="workmoney" size="small"></el-input>
            </el-form-item>
            <el-form-item label="通讯补贴:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="tongxun" size="small"></el-input>
            </el-form-item>
            <el-form-item label="饭补:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="rich" size="small"></el-input>
            </el-form-item>
            <el-form-item label="住房补贴:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="housemoney" size="small"></el-input>
            </el-form-item>
            <el-form-item label="交通补贴:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="trafficmoney" size="small"></el-input>
            </el-form-item>
            <el-form-item label="五险:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="wuxian" size="small"></el-input>
            </el-form-item>
            <el-form-item label="备注:">
                <el-input v-model="remark" size="small"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="orderupdate()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import echarts from 'echarts'
import Top from "./commens/top.vue";
  export default{
    components: {Top},

    data(){
      return{
        dialogVisibles:false,
        value3:"",
        name:"",
        option1ss: [{
          value3: '支付宝',
          label: '支付宝'
        }, {
          value3: '微信',
          label: '微信'
        }, {
          value3: '现金',
          label: '现金'
        }],
        workmoney:"",
        wuxian:"",
        housemoney:"",
        trafficmoney:"",
        rich:"",
        tongxun:"",
        countmoney:"",
        scope:"",
        index: 0,
        dialogVisible:false,
        remark:"",
        money:"",
        value3:"",
        times: 0,
        multipleSelection:[],
        options: [{
          value: '1',
          label: '课程订单'
        }, {
          value: '2',
          label: '组合包订单'
        }, {
          value: '3',
          label: '商品订单'
        }],

        value:"",
        orderlist:[],
        name: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2:'',
        option1s: [{
          value2: '未结清',
          label: '未结清'
        }, {
          value2: '已结清',
          label: '已结清'
        }, {
          value2: '已退费',
          label: '已退费'
        }],
      };
    },

  mounted() {
    this.initChart()
    this.initChart2()
  },
  methods: {
    export2Excel(){
      window.location.href="http://localhost:8082/orders/downloadexcel.do"
      this.$message.success("导出成功!")
    },
    setsalay(scope){
      this.scope = scope
      this.workmoney = scope.workmoney
      this.tongxun = scope.tongxun
      this.trafficmoney = scope.trafficmoney
      this.rich = scope.rich
      this.housemoney = scope.housemoney
      this.wuxian = scope.wuxian * -1
      this.dialogVisible = true
    },
    setcount(scope){
      this.scope = scope
      this.countmoney = scope.countmoney
      this.dialogVisibles = true
    },
    findByOrderType(){
      this.index = 3
      this.find1()
      this.$message.success("查询成功!")
    },
    find1(){
      this.$axios.get("orders/findByOrderType/"+this.value).then(res=>{
        if(res.data.code == 200){
          this.orderlist = res.data.data
          this.value = ""
        }
      })
    },
    findByOrderMoneyType(){
      this.index = 4
      this.find2()
      this.$message.success("查询成功!")
    },
    find2(){
      let data = {
        ordernewstatus : this.value2
      }
      this.$axios.post("orders/findByOrderMoneyType",data).then(res=>{
        if(res.data.code == 200){
          this.orderlist = res.data.data
          this.value2 = ""
        }
      })
    },
    findByName(){
      this.find3()
    },
    find3(){
      if(this.name != ""){
        let data = {
          teacher : this.name
      }
      this.$axios.post("orders/findByNames",data).then(res=>{
        if(res.data.code == 200){
          this.orderlist = res.data.data
          this.$message.success("查询成功!")
          this.name = ""
        }
      })
      }else{
        this.$message.warning("已经查询全部请输入查询信息!")
        this.findByOrders()
      }
    },
    findByTime(){
      this.index = 6
      alert(11)
      this.find4()
    },
    find4(){
      let data = {
          starttime: this.dateToString(this.value3[0]),
          lasttime: this.dateToString(this.value3[1])
      }
      this.$axios.post("orders/findByTime",data).then(res=>{
        if(res.data.code == 200){
          this.orderlist = res.data.data
          this.$message.success("查询成功!")
          this.value3 = ""
        }
      })
    },
    dateToString: function (date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString();
                var day = (date.getDate()).toString();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }
                var dateTime = year + "-" + month + "-" + day;
                return dateTime;
            },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
      deleteAll(){
                //获取已选择对象的id
                let ids = new Array()
                // 遍历获取id
                for (const item of this.multipleSelection) {
                    console.log(this.multipleSelection)
                    ids.push(item.id)
                }
                console.log(ids)
                console.log(ids.length)
                //发请求
                let data = {
                    ids: ids
                }
                if (ids.length != 0){
                  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$axios.put("/orders/deleteAll",data).then(res => {
                              if(this.index == 0){
                                this.findByOrders()
                              }else if(this.index == 1){
                                this.findByCount()
                              }else if(this.index == 2){
                                this.findByGrounp()
                              }else if(this.index == 3){
                                this.findByGoods()
                              }else if(this.index == 4){

                              }else if(this.index == 5){

                              }
                              else{

                              }
                            this.$message.success("删除成功")
                        })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
      else{
        this.$message.warning("请选择要删除的数据!")
      }
    },
    findByCount(){
      this.$router.push({
        name: 'Salay',
        params:{
          orderdetail:1
        }
      })
    },
    findByGrounp(){
      this.index = 2
      this.$axios.get("/orders/findByCount/"+"2").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)
    })
    },

    ifback(backid){
      if(backid == 1){
        return true
      }else{
        return false
      }
    },
    del(scope){
      alert(this.index)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$axios.delete("/orders/delByUserid/"+scope.userid).then(res=>{
          if(res.data.code == 200){
          this.$message.success("删除成功")
          if(this.index == 0){
          this.findByOrders()
        }else if(this.index == 1){
          this.findByCount()
        }else if(this.index == 2){
          this.findByGrounp()
        }else{
          this.findByGoods()
        }
        }
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
    },

    update1(){
      let data = {
        uid : this.scope.uid,
        countmoney : this.countmoney
      }
      this.$axios.post("/orders/updateBySalays",data).then(res => {
      if(res.data.code == 200){
        this.$message.success("修改成功")
        this.findByOrders()
        this.dialogVisibles = false
      }
    })
    },
    getmoney(scope){
      this.scope = scope.row
      console.log(scope)
      this.orderlist[0].lastpayment = this.scope.lastpayment
      this.dialogVisible = true
    },
    orderupdate(){
      let data = {
        uid:this.scope.uid,
        workmoney:this.workmoney,
        countmoney:this.scope.countmoney,
        tongxun : this.tongxun,
        rich : this.rich,
        housemoney: this.housemoney,
        trafficmoney:this.trafficmoney,
        wuxian: this.wuxian*-1,
        remark:this.remark
      }
      this.$axios.post("/orders/updateSalay",data).then(res => {
      if(res.data.code == 200){
        this.$message.success("修改成功")
        this.findByOrders()
        this.dialogVisible = false
      }
    })
    },
    ifbacks(backid){
      if(backid == 2){
        return true
      }else{
        return false
      }
    },
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
          }
        ]
      }
      chart.setOption(option)
    },
    detal(scope){
      console.log(scope)
    },

    initChart2() {
      const chart = echarts.init(document.getElementById('chart1'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
          }
        ]
      }
      chart.setOption(option)
    },
    gotodetail(scope){
      console.log(scope)
      this.$router.push({
        name: 'Orderdetail',
        params:{
          orderdetail:scope
        }
      })
    },
    findByOrders(){
      this.$axios.get("/orders/findBySalay2").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)

    })
    }
  },
  mounted() {
    this.findByOrders()
    this.index = 0
  }
}
</script>

<style scoped>
</style>
